import React, { Component } from 'react'
import { Card, Col, Row, Statistic, List, Tabs, DatePicker, Button } from 'antd';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import './home.less'
const { TabPane } = Tabs;
const { RangePicker } = DatePicker

const data = [
  '九阳（Joyoung）破壁机多功能家用预约加热破壁料理机 榨汁机豆浆机绞肉机果汁机 搅拌机辅食机新款JYL-Y915S',
  '长帝（changdi）32升家用多功能电烤箱搪瓷内胆上下管独立调温低温发酵全功能高配置家庭用烤箱CRTF32PD',
  'sk-iiskiisk2神仙水精华液调理补水收缩毛孔A',
  '2019新款ins超火新款连帽卫衣女',
  '雅诗兰黛DW持妆粉底液',
  '兰蔻粉水清滢柔肤水400ml 爽肤水补水保湿舒缓化妆水',
  '玛丽黛佳骑士小金管口红小众品牌唇膏女',
  '2019新款ins超火新款连帽卫衣女',
  '雅诗兰黛DW持妆粉底液',
  '兰蔻粉水清滢柔肤水400ml 爽肤水补水保湿舒缓化妆水'
]
const operations = <div><Button type="link">今日</Button><Button type="link">本周</Button><RangePicker format={'YYYY/MM/DD'}/></div>;
class Home extends Component{
  componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
      title: { text: '销售额趋势' },
      tooltip: {},
      xAxis: {
        data: ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"]
      },
      yAxis: {},
      series: [{
          name: '销售额',
          type: 'bar',
          data: [250, 750, 980, 380, 505, 270, 250, 750, 980, 380, 505, 270]
      }]
    });
  }
  render() {
    return (
      <div className="home">
        <Row gutter={20}>
          <Col span={5}>
            <Card title="新增用户" hoverable>
              <Statistic value={11} precision={0} valueStyle={{ color: '#3f8600' }} suffix="位" />
            </Card>
          </Col>
          <Col span={5}>
            <Card title="新增订单" hoverable>
              <Statistic value={50} precision={0} valueStyle={{ color: '#3f8600' }} suffix="笔" />
            </Card>
          </Col>
          <Col span={5}>
            <Card title="今日销售额" hoverable>
              <Statistic value={509.89} precision={2} valueStyle={{ color: '#3f8600' }} suffix="元" />
            </Card>
          </Col>
          <Col span={5}>
            <Card title="退款订单数量" hoverable>
              <Statistic value={0} precision={0} valueStyle={{ color: '#cf1322' }} suffix="笔" />
            </Card>
          </Col>
        </Row>
        <Tabs tabBarExtraContent={operations}>
          <TabPane tab="销售额" key="1">
            <Row>
              <Col span={16}>
                <div id="main" style={{ width: '100%', height: 400 }}></div>
              </Col>
              <Col span={8}>
                <List
                  size="small"
                  header={<div>今日商品销售排行</div>}
                  bordered
                  dataSource={data}
                  renderItem={item => <List.Item>{item}</List.Item>}
                />
              </Col>
            </Row>
          </TabPane>
        </Tabs>
      </div>
    )
  }
}
export default Home